<template>
  <div
    class="signal-wrapper"
    :style="{ transform: 'scale(' + scaleX + ',' + scaleY + ')' }"
  >
    <ul>
      <li
        v-for="i in 6"
        :key="i"
        :style="{
          background:
            '' + (i <= strength ? '#5cf548' : 'rgba(0, 0, 0, 0.4)') + '',
        }"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: `signal-wrap`,
  props: {
    // 尺寸
    width: {
      type: Number,
      default: 60,
    },
    height: {
      type: Number,
      default: 40,
    },
    // 信号强度，默认满格信号
    strength: {
      type: Number,
      default: 6,
      validator: function (value) {
        // 必须为不大于6的整数
        if (value > 6 || value < 0) {
          console.error(
            `ERROR in 'SignalStrength.vue':you must provide a number <=6 and >=0!`
          )
          return false
        } else {
          return true
        }
      },
    },
  },
  computed: {
    scaleX() {
      return this.width / 60
    },
    scaleY() {
      return this.height / 40
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-wrapper {
  width: 50px;
  height: 30px;
}
ul {
  position: relative;
  width: 100%;
  height: 100%;
}
li {
  width: 5px;
  position: absolute;
  bottom: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}
ul li:nth-child(1) {
  height: 10px;
  left: 0px;
}
ul li:nth-child(2) {
  height: 15px;
  left: 10px;
}
ul li:nth-child(3) {
  height: 20px;
  left: 20px;
}
ul li:nth-child(4) {
  height: 25px;
  left: 30px;
}
ul li:nth-child(5) {
  height: 30px;
  left: 40px;
}
ul li:nth-child(6) {
  height: 35px;
  left: 50px;
}
</style>
